<template>
  <el-dialog title="选择学校" :visible.sync="visible" :close-on-click-modal='false' fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form label-width="80px" inline>
      <el-form-item label="学校名称">
        <el-input v-model="dataForm.schoolName"></el-input>
      </el-form-item>
      <el-form-item label="省名称">
        <el-select filterable default-first-option clearable v-model="region.province" placeholder="请选择" @change="getCitys">
          <el-option v-for="item in provinces" :key="item.id" :label="item.regionName"
            :value="item.id">
            <span style="float: left">{{ item.regionName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市名称">
        <el-select filterable default-first-option clearable v-model="region.city" placeholder="请选择" @change="getAreas">
          <el-option v-for="item in citys" :key="item.id" :label="item.regionName"
            :value="item.id">
            <span style="float: left">{{ item.regionName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县名称">
        <el-select filterable default-first-option clearable v-model="region.area" placeholder="请选择" @change="areaChange">
          <el-option v-for="item in areas" :key="item.id" :label="item.regionName"
            :value="item.id">
            <span style="float: left">{{ item.regionName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学校类型">
        <el-select v-model="dataForm.schoolType">
          <el-option v-for="item in typeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHandle">查询</el-button>
        <el-button type="info" @click="clearHandle">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="avue-crud__pagination" style="margin-bottom: 25px;">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100, 200]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>

    <el-table :data="dataList" height="calc(100vh - 215px)" ref="singleTable" border v-loading="dataListLoading">
      <el-table-column type="index" width="50">
        <template slot-scope="scope">
          <el-radio v-model="dataForm.schoolId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;" @change="checkSchool(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="schoolCode" label="学校编号" width="80"></el-table-column>
      <el-table-column prop="schoolName" label="学校名称" width="120"></el-table-column>
      <el-table-column prop="province" label="省名称" width="80"></el-table-column>
      <el-table-column prop="city" label="市名称" width="80"></el-table-column>
      <el-table-column prop="area" label="区/县名称" width="80"></el-table-column>
      <el-table-column prop="schoolType" label="学校类型" width="80">
        <template slot-scope="scope">
          <el-tag effect="dark">{{ statusFormat(scope.row.schoolType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="详细地址" min-width="140"></el-table-column>
      <el-table-column prop="fullAddress" label="全地址" min-width="180"></el-table-column>
      <el-table-column prop="leader" label="负责人" width="80"></el-table-column>
      <el-table-column prop="contactName" label="联系人" width="80"></el-table-column>
      <el-table-column prop="contact" label="联系方式" width="120"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { fetchSchoolList } from '@/api/pvm/school'
  import { getListByParentId } from '@/api/admin/region'
  export default {
    data(){
      return {
        visible: false,
        region: {
          province: '',
          city: '',
          area: ''
        },
        dataForm: {
          schoolName: '',
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          schoolType: ''
        },
        dataList: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        typeOptions: [],
        provinces: [],
        citys: [],
        areas: [],
      }
    },
    methods: {
      init(data){
        this.visible = true
        this.getProvinces()
        if(data){
          let data1 = JSON.parse(data)
          this.getCitys(data1.province)
          this.getAreas(data1.city)
          this.$set(this.dataForm,'provinceCode',data1.province)
          this.$set(this.dataForm,'cityCode',data1.city)
          this.$set(this.dataForm,'areaCode',data1.area)
          this.$set(this.dataForm,'schoolType',data1.schoolType)
        }
        this.dataList = []
        remote('school_type').then(response => {
          let responseData = response.data.data
          let list = []
          responseData.forEach(item => {
            list.push({label: item.label, value: item.value*1})
          })
          this.typeOptions = [...list]
        })
        this.$nextTick(() => {
          if(data){
            this.region = JSON.parse(data)
          }
          this.getDataList()
        })
      },
      searchHandle(){
        this.pageIndex = 1
        this.getDataList()
      },
      clearHandle(){
        for(let key in this.dataForm){
          this.dataForm = ''
        }
      },
      getDataList(){
        this.dataListLoading = true
        let params1 = {current: this.pageIndex,size: this.pageSize}
        let params2 = filterParams(this.dataForm)
        fetchSchoolList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle(val){
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle(val){
        this.pageIndex = val
        this.getDataList()
      },
      checkSchool(data){
        this.$emit('refreshForm',data)
        this.visible = false
      },
      //  转换类型格式
      statusFormat(val){
        let obj = {}
        obj = this.typeOptions.find(item => {
          if(item.value === val){
            return item
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      getProvinces(){
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinces = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员")
        });
      },
      getCitys(id){
        this.citys = []
        this.areas = []
        this.$set(this.region,'city','')
        this.$set(this.region,'area','')
        this.$set(this.dataForm,'provinceCode','id')
        this.$set(this.dataForm,'cityCode','')
        this.$set(this.dataForm,'areaCode','')
        if(id){
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.citys = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员")
          });
        }
      },
      getAreas(id){
        this.areas = []
        this.$set(this.region,'area','')
        this.$set(this.dataForm,'cityCode','id')
        this.$set(this.dataForm,'areaCode','')
        if(id){
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.areas = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员")
          });
        }
      },
      areaChange(id){
        this.$set(this.dataForm,'areaCode','id')
      }
    }
  }
</script>

<style>
</style>
